<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/grouping-content.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:25 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=sections.html>← 4.3 Sections</a> — <a href=index.html>Table of Contents</a> — <a href=text-level-semantics.html>4.5 Text-level semantics →</a></nav><ol class=toc><li><ol><li><a href=grouping-content.html#grouping-content><span class=secno>4.4</span> Grouping content</a><ol><li><a href=grouping-content.html#the-p-element><span class=secno>4.4.1</span> The <code>p</code> element</a><li><a href=grouping-content.html#the-hr-element><span class=secno>4.4.2</span> The <code>hr</code> element</a><li><a href=grouping-content.html#the-pre-element><span class=secno>4.4.3</span> The <code>pre</code> element</a><li><a href=grouping-content.html#the-blockquote-element><span class=secno>4.4.4</span> The <code>blockquote</code> element</a><li><a href=grouping-content.html#the-ol-element><span class=secno>4.4.5</span> The <code>ol</code> element</a><li><a href=grouping-content.html#the-ul-element><span class=secno>4.4.6</span> The <code>ul</code> element</a><li><a href=grouping-content.html#the-menu-element><span class=secno>4.4.7</span> The <code>menu</code> element</a><li><a href=grouping-content.html#the-li-element><span class=secno>4.4.8</span> The <code>li</code> element</a><li><a href=grouping-content.html#the-dl-element><span class=secno>4.4.9</span> The <code>dl</code> element</a><li><a href=grouping-content.html#the-dt-element><span class=secno>4.4.10</span> The <code>dt</code> element</a><li><a href=grouping-content.html#the-dd-element><span class=secno>4.4.11</span> The <code>dd</code> element</a><li><a href=grouping-content.html#the-figure-element><span class=secno>4.4.12</span> The <code>figure</code> element</a><li><a href=grouping-content.html#the-figcaption-element><span class=secno>4.4.13</span> The <code>figcaption</code> element</a><li><a href=grouping-content.html#the-main-element><span class=secno>4.4.14</span> The <code>main</code> element</a><li><a href=grouping-content.html#the-search-element><span class=secno>4.4.15</span> The <code>search</code> element</a><li><a href=grouping-content.html#the-div-element><span class=secno>4.4.16</span> The <code>div</code> element</a></ol></ol></ol><h3 id=grouping-content><span class=secno>4.4</span> Grouping content<a href=#grouping-content class=self-link></a></h3>

  <h4 id=the-p-element><span class=secno>4.4.1</span> The <dfn data-dfn-type=element><code>p</code></dfn> element<a href=#the-p-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p title="The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.">Element/p</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-p-element:concept-element-categories>Categories</a>:<dd><a id=the-p-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-p-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-p-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-p-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-p-element:concept-element-content-model>Content model</a>:<dd><a id=the-p-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-p-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-p-element:the-p-element><a href=#the-p-element>p</a></code> element's <a href=syntax.html#syntax-end-tag id=the-p-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-p-element:the-p-element-2><a href=#the-p-element>p</a></code> element is immediately followed by an <code id=the-p-element:the-address-element><a href=sections.html#the-address-element>address</a></code>, <code id=the-p-element:the-article-element><a href=sections.html#the-article-element>article</a></code>,
  <code id=the-p-element:the-aside-element><a href=sections.html#the-aside-element>aside</a></code>, <code id=the-p-element:the-blockquote-element><a href=#the-blockquote-element>blockquote</a></code>, <code id=the-p-element:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code>, <code id=the-p-element:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code>,
  <code id=the-p-element:the-div-element><a href=#the-div-element>div</a></code>, <code id=the-p-element:the-dl-element><a href=#the-dl-element>dl</a></code>, <code id=the-p-element:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code>, <code id=the-p-element:the-figcaption-element><a href=#the-figcaption-element>figcaption</a></code>,
  <code id=the-p-element:the-figure-element><a href=#the-figure-element>figure</a></code>, <code id=the-p-element:the-footer-element><a href=sections.html#the-footer-element>footer</a></code>, <code id=the-p-element:the-form-element><a href=forms.html#the-form-element>form</a></code>, <code id=the-p-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code id=the-p-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>,
  <code id=the-p-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code id=the-p-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code id=the-p-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code id=the-p-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code id=the-p-element:the-header-element><a href=sections.html#the-header-element>header</a></code>,
  <code id=the-p-element:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code>, <code id=the-p-element:the-hr-element><a href=#the-hr-element>hr</a></code>, <code id=the-p-element:the-main-element><a href=#the-main-element>main</a></code>, <code id=the-p-element:the-menu-element><a href=#the-menu-element>menu</a></code>, <code id=the-p-element:the-nav-element><a href=sections.html#the-nav-element>nav</a></code>,
  <code id=the-p-element:the-ol-element><a href=#the-ol-element>ol</a></code>, <code id=the-p-element:the-p-element-3><a href=#the-p-element>p</a></code>, <code id=the-p-element:the-pre-element><a href=#the-pre-element>pre</a></code>, <code id=the-p-element:the-search-element><a href=#the-search-element>search</a></code>, <code id=the-p-element:the-section-element><a href=sections.html#the-section-element>section</a></code>,
  <code id=the-p-element:the-table-element><a href=tables.html#the-table-element>table</a></code>, or <code id=the-p-element:the-ul-element><a href=#the-ul-element>ul</a></code> element, or if there is no more content in the parent
  element and the parent element is an <a href=infrastructure.html#html-elements id=the-p-element:html-elements>HTML element</a> that is not
  an <code id=the-p-element:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=the-p-element:the-audio-element><a href=media.html#the-audio-element>audio</a></code>, <code id=the-p-element:the-del-element><a href=edits.html#the-del-element>del</a></code>, <code id=the-p-element:the-ins-element><a href=edits.html#the-ins-element>ins</a></code>, <code id=the-p-element:the-map-element><a href=image-maps.html#the-map-element>map</a></code>,
  <code id=the-p-element:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code>, or <code id=the-p-element:the-video-element><a href=media.html#the-video-element>video</a></code> element, or an <a id=the-p-element:autonomous-custom-element href=custom-elements.html#autonomous-custom-element>autonomous custom
  element</a>.<dt><a href=dom.html#concept-element-attributes id=the-p-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-p-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-p-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-p>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-p>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-p-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLParagraphElement</code>.</dl>

  <p>The <code id=the-p-element:the-p-element-4><a href=#the-p-element>p</a></code> element <a id=the-p-element:represents href=dom.html#represents>represents</a> a <a id=the-p-element:paragraph href=dom.html#paragraph>paragraph</a>.</p>

  <p class=note>While paragraphs are usually represented in visual media by blocks of text that
  are physically separated from adjacent blocks through blank lines, a style sheet or user agent
  would be equally justified in presenting paragraph breaks in a different manner, for instance
  using inline pilcrows (¶).</p>

  <div class=example>
   <p>The following examples are conforming HTML fragments:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The little kitten gently seated herself on a piece of
carpet. Later in her life, this would be referred to as the time the
cat sat on the mat.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Personal information<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;n&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;anon&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;checkbox&quot;</c-><c- p>&gt;</c-> Hide from other users<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Address: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;a&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>
   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->There was once an example from Femley,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
Whose markup was of dubious quality.<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
The validator complained,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
So the author was pained,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
To move the error from the markup to the rhyming.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>The <code id=the-p-element:the-p-element-5><a href=#the-p-element>p</a></code> element should not be used when a more specific element is more
  appropriate.</p>

  <div class=example>

   <p>The following example is technically correct:</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- c>&lt;!-- ... --&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Last modified: 2001-04-23<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Author: fred@example.com<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>However, it would be better marked-up as:</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- c>&lt;!-- ... --&gt;</c->
 <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->Last modified: 2001-04-23<c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>address</c-><c- p>&gt;</c->Author: fred@example.com<c- p>&lt;/</c-><c- f>address</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>Or:</p>

<pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- c>&lt;!-- ... --&gt;</c->
 <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Last modified: 2001-04-23<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>address</c-><c- p>&gt;</c->Author: fred@example.com<c- p>&lt;/</c-><c- f>address</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=note>

   <p>List elements (in particular, <code id=the-p-element:the-ol-element-2><a href=#the-ol-element>ol</a></code> and <code id=the-p-element:the-ul-element-2><a href=#the-ul-element>ul</a></code> elements) cannot be children
   of <code id=the-p-element:the-p-element-6><a href=#the-p-element>p</a></code> elements. When a sentence contains a bulleted list, therefore, one might wonder
   how it should be marked up.</p>

   <div class=example>
    <p>For instance, this fantastic sentence has bullets relating to</p>
    <ul><li>wizards,
     <li>faster-than-light travel, and
     <li>telepathy,
    </ul>
    <p>and is further discussed below.</p>
   </div>

   <p>The solution is to realize that a <i id=the-p-element:paragraph-2><a href=dom.html#paragraph>paragraph</a></i>, in HTML terms, is not a
   logical concept, but a structural one. In the fantastic example above, there are actually
   <em>five</em> <a href=dom.html#paragraph id=the-p-element:paragraph-3>paragraphs</a> as defined by this specification: one
   before the list, one for each bullet, and one after the list.</p>

   <div class=example>

    <p>The markup for the above example could therefore be:</p>

    <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->For instance, this fantastic sentence has bullets relating to<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->wizards,
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->faster-than-light travel, and
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->telepathy,
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->and is further discussed below.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   </div>

   <p>Authors wishing to conveniently style such "logical" paragraphs consisting of multiple
   "structural" paragraphs can use the <code id=the-p-element:the-div-element-2><a href=#the-div-element>div</a></code> element instead of the <code id=the-p-element:the-p-element-7><a href=#the-p-element>p</a></code>
   element.</p>

   <div class=example>

    <p>Thus for instance the above example could become the following:</p>

    <pre><code class='html'><c- p>&lt;</c-><c- f>div</c-><c- p>&gt;</c->For instance, this fantastic sentence has bullets relating to
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->wizards,
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->faster-than-light travel, and
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->telepathy,
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
and is further discussed below.<c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c-></code></pre>

    <p>This example still has five structural paragraphs, but now the author can style just the
    <code id=the-p-element:the-div-element-3><a href=#the-div-element>div</a></code> instead of having to consider each part of the example separately.</p>

   </div>

  </div>



  <h4 id=the-hr-element><span class=secno>4.4.2</span> The <dfn data-dfn-type=element><code>hr</code></dfn> element<a href=#the-hr-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr title="The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.">Element/hr</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-hr-element:concept-element-categories>Categories</a>:<dd><a id=the-hr-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-hr-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-hr-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-hr-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dd>As a child of a <code id=the-hr-element:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-hr-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-hr-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-hr-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-hr-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-hr-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-hr-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-hr-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-hr>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-hr>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-hr-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLHRElement</code>.</dl>

  <p>The <code id=the-hr-element:the-hr-element><a href=#the-hr-element>hr</a></code> element <a id=the-hr-element:represents href=dom.html#represents>represents</a> a <a id=the-hr-element:paragraph href=dom.html#paragraph>paragraph</a>-level thematic
  break, e.g., a scene change in a story, or a transition to another topic within a section of a
  reference book; alternatively, it represents a separator between a set of options of a
  <code id=the-hr-element:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element.</p>

  <div class=example>

   <p>The following fictional extract from a project manual shows two sections that use the
   <code id=the-hr-element:the-hr-element-2><a href=#the-hr-element>hr</a></code> element to separate topics within the section.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Communication<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->There are various methods of communication. This section
 covers a few of the important ones used by the project.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>hr</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Communication stones seem to come in pairs and have mysterious
 properties:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->They can transfer thoughts in two directions once activated
  if used alone.<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->If used with another device, they can transfer one&apos;s
  consciousness to another body.<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->If both stones are used with another device, the
  consciousnesses switch bodies.<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>hr</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Radios use the electromagnetic spectrum in the meter range and
 longer.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>hr</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Signal flares use the electromagnetic spectrum in the
 nanometer range.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Food<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->All food at the project is rationed:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Potatoes<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->Two per day<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Soup<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->One bowl per day<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>hr</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Cooking is done by the chefs on a set rotation.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>There is no need for an <code id=the-hr-element:the-hr-element-3><a href=#the-hr-element>hr</a></code> element between the sections themselves, since the
   <code id=the-hr-element:the-section-element><a href=sections.html#the-section-element>section</a></code> elements and the <code id=the-hr-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> elements imply thematic changes
   themselves.</p>

  </div>

  <div class=example>

   <p>The following extract from <cite>Pandora's Star</cite> by Peter F. Hamilton shows two
   paragraphs that precede a scene change and the paragraph that follows it. The scene change,
   represented in the printed book by a gap containing a solitary centered star between the second
   and third paragraphs, is here represented using the <code id=the-hr-element:the-hr-element-4><a href=#the-hr-element>hr</a></code> element.</p>

   

   <pre lang=en-GB><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;</c->Maybe it won&apos;t be that bad<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c->, he told himself. The lie was
comforting enough to get him through the rest of the night&apos;s
shift.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<strong><c- p>&lt;</c-><c- f>hr</c-><c- p>&gt;</c-></strong>
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond&apos;s winters.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p class=note>The <code id=the-hr-element:the-hr-element-5><a href=#the-hr-element>hr</a></code> element does not affect the document's
  <a id=the-hr-element:outline href=sections.html#outline>outline</a>.</p>

  <h4 id=the-pre-element><span class=secno>4.4.3</span> The <dfn data-dfn-type=element><code>pre</code></dfn> element<a href=#the-pre-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre title="The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.">Element/pre</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-pre-element:concept-element-categories>Categories</a>:<dd><a id=the-pre-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-pre-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-pre-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-pre-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-pre-element:concept-element-content-model>Content model</a>:<dd><a id=the-pre-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-pre-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-pre-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-pre-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-pre-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-pre>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-pre>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-pre-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLPreElement</code>.</dl>

  <p>The <code id=the-pre-element:the-pre-element><a href=#the-pre-element>pre</a></code> element <a id=the-pre-element:represents href=dom.html#represents>represents</a> a block of preformatted text, in which
  structure is represented by typographic conventions rather than by elements.</p>

  <p class=note>In <a id=the-pre-element:syntax href=syntax.html#syntax>the HTML syntax</a>, a leading newline character immediately following
  the <code id=the-pre-element:the-pre-element-2><a href=#the-pre-element>pre</a></code> element start tag is stripped.</p>

  <p>Some examples of cases where the <code id=the-pre-element:the-pre-element-3><a href=#the-pre-element>pre</a></code> element could be used:</p>

  <ul><li>Including an email, with paragraphs indicated by blank lines, lists indicated by lines
   prefixed with a bullet, and so on.<li>Including fragments of computer code, with structure indicated according to the conventions
   of that language.<li>Displaying ASCII art.</ul>

  <p class=note>Authors are encouraged to consider how preformatted text will be experienced when
  the formatting is lost, as will be the case for users of speech synthesizers, braille displays,
  and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a
  textual description, would be more universally accessible to the readers of the document.</p>

  <p>To represent a block of computer code, the <code id=the-pre-element:the-pre-element-4><a href=#the-pre-element>pre</a></code> element can be used with a
  <code id=the-pre-element:the-code-element><a href=text-level-semantics.html#the-code-element>code</a></code> element; to represent a block of computer output the <code id=the-pre-element:the-pre-element-5><a href=#the-pre-element>pre</a></code> element
  can be used with a <code id=the-pre-element:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code> element. Similarly, the <code id=the-pre-element:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code> element can be used
  within a <code id=the-pre-element:the-pre-element-6><a href=#the-pre-element>pre</a></code> element to indicate text that the user is to enter.</p>

  

  <div class=example>

   <p>In the following snippet, a sample of computer code is presented.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This is the <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->Panel<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c-> constructor:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>code</c-><c- p>&gt;</c->function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In the following snippet, <code id=the-pre-element:the-samp-element-2><a href=text-level-semantics.html#the-samp-element>samp</a></code> and <code id=the-pre-element:the-kbd-element-2><a href=text-level-semantics.html#the-kbd-element>kbd</a></code> elements are mixed in the
   contents of a <code id=the-pre-element:the-pre-element-7><a href=#the-pre-element>pre</a></code> element to show a session of Zork I.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>samp</c-><c- p>&gt;</c->You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

&gt;<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>kbd</c-><c- p>&gt;</c->open mailbox<c- p>&lt;/</c-><c- f>kbd</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>samp</c-><c- p>&gt;</c->Opening the mailbox reveals:
A leaflet.

&gt;<c- p>&lt;/</c-><c- f>samp</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following shows a contemporary poem that uses the <code id=the-pre-element:the-pre-element-8><a href=#the-pre-element>pre</a></code> element to preserve its
   unusual formatting, which forms an intrinsic part of the poem itself.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;</c->                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07<c- p>&lt;/</c-><c- f>pre</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-blockquote-element><span class=secno>4.4.4</span> The <dfn data-dfn-type=element><code>blockquote</code></dfn> element<a href=#the-blockquote-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote title="The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.">Element/blockquote</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-blockquote-element:concept-element-categories>Categories</a>:<dd><a id=the-blockquote-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-blockquote-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-blockquote-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-blockquote-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-blockquote-element:concept-element-content-model>Content model</a>:<dd><a id=the-blockquote-element:flow-content-2-3 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-blockquote-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-blockquote-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-blockquote-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-blockquote-element:attr-blockquote-cite><a href=#attr-blockquote-cite>cite</a></code> —  Link to the source of the quotation or more information about the edit
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-blockquote-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-blockquote>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-blockquote>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-blockquote-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLQuoteElement</code>.</dl>

  <p>The <code id=the-blockquote-element:the-blockquote-element><a href=#the-blockquote-element>blockquote</a></code> element <a id=the-blockquote-element:represents href=dom.html#represents>represents</a> a section that is quoted from
  another source.</p>

  <p>Content inside a <code id=the-blockquote-element:the-blockquote-element-2><a href=#the-blockquote-element>blockquote</a></code> must be quoted from another source, whose address, if
  it has one, may be cited in the <dfn data-dfn-for=blockquote id=attr-blockquote-cite data-dfn-type=element-attr><code>cite</code></dfn> attribute.</p>

  <p>If the <code id=the-blockquote-element:attr-blockquote-cite-2><a href=#attr-blockquote-cite>cite</a></code> attribute is present, it must be a
  <a id=the-blockquote-element:valid-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by spaces</a>.  User agents may
  allow users to follow such citation links, but they are primarily intended for private use (e.g.,
  by server-side scripts collecting statistics about a site's use of quotations), not for
  readers.</p>

  <p>The content of a <code id=the-blockquote-element:the-blockquote-element-3><a href=#the-blockquote-element>blockquote</a></code> may be abbreviated or may have context added in the
  conventional manner for the text's language.</p>

  <div class=example>

   <p>For example, in English this is traditionally done using square brackets. Consider a page with
   the sentence "Jane ate the cracker. She then said she liked apples and fish."; it could be quoted
   as follows:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->[Jane] then said she liked [...] fish.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>Attribution for the quotation, if any, must be placed outside the <code id=the-blockquote-element:the-blockquote-element-4><a href=#the-blockquote-element>blockquote</a></code>
  element.</p> 

  <div class=example>

   <p>For example, here the attribution is given in a paragraph after the quote:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->— Stephen Roberts<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>The other examples below show other ways of showing attribution.</p>

  </div>

  <div class=example>

   <p>Here a <code id=the-blockquote-element:the-blockquote-element-5><a href=#the-blockquote-element>blockquote</a></code> element is used in conjunction with a <code id=the-blockquote-element:the-figure-element><a href=#the-figure-element>figure</a></code>
   element and its <code id=the-blockquote-element:the-figcaption-element><a href=#the-figcaption-element>figcaption</a></code> to clearly relate a quote to its attribution (which is
   not part of the quote and therefore doesn't belong inside the <code id=the-blockquote-element:the-blockquote-element-6><a href=#the-blockquote-element>blockquote</a></code>
   itself):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what&apos;s true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Carl Sagan, in &quot;<c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Wonder and Skepticism<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->&quot;, from
 the <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Skeptical Inquirer<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> Volume 19, Issue 1 (January-February
 1995)<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This next example shows the use of <code id=the-blockquote-element:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code> alongside <code id=the-blockquote-element:the-blockquote-element-7><a href=#the-blockquote-element>blockquote</a></code>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->His next piece was the aptly named <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Sonnet 130<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>blockquote</c-> <c- e>cite</c-><c- o>=</c-><c- s>&quot;https://quotes.example.org/s/sonnet130.html&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My mistress&apos; eyes are nothing like the sun,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
  Coral is far more red, than her lips red,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
  ...</code></pre>

  </div>

  <div class=example>

   <p>This example shows how a forum post could use <code id=the-blockquote-element:the-blockquote-element-8><a href=#the-blockquote-element>blockquote</a></code> to show what post a user
   is replying to. The <code id=the-blockquote-element:the-article-element><a href=sections.html#the-article-element>article</a></code> element is used for each post, to mark up the
   threading.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://bacon.example.com/?blog=109431&quot;</c-><c- p>&gt;</c->Bacon on a crowbar<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->t3yw<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> 12 points 1 hour ago<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I bet a narwhal would love that.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?pid=29578&quot;</c-><c- p>&gt;</c->permalink<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->greg<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> 8 points 1 hour ago<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->I bet a narwhal would love that.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Dude narwhals don&apos;t eat bacon.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?pid=29579&quot;</c-><c- p>&gt;</c->permalink<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->t3yw<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> 15 points 1 hour ago<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->I bet a narwhal would love that.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Dude narwhals don&apos;t eat bacon.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Next thing you&apos;ll be saying they don&apos;t get capes and wizard
    hats either!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?pid=29580&quot;</c-><c- p>&gt;</c->permalink<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->boing<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> -5 points 1 hour ago<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->narwhals are worse than ceiling cat<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?pid=29581&quot;</c-><c- p>&gt;</c->permalink<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
     <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
   <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;&lt;</c-><c- f>strong</c-><c- p>&gt;</c->fred<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c-> 1 points 23 minutes ago<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->I bet a narwhal would love that.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I bet they&apos;d love to peel a banana too.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?pid=29582&quot;</c-><c- p>&gt;</c->permalink<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>This example shows the use of a <code id=the-blockquote-element:the-blockquote-element-9><a href=#the-blockquote-element>blockquote</a></code> for short snippets, demonstrating that
   one does not have to use <code id=the-blockquote-element:the-p-element><a href=#the-p-element>p</a></code> elements inside <code id=the-blockquote-element:the-blockquote-element-10><a href=#the-blockquote-element>blockquote</a></code> elements:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->He began his list of &quot;lessons&quot; with the following:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->He continued with a number of similar points, ending with:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->We shall now discuss these points...</code></pre>

  </div>

  <p class=note><a href=semantics-other.html#conversations>Examples of how to represent a conversation</a> are shown
  in a later section; it is not appropriate to use the <code id=the-blockquote-element:the-cite-element-2><a href=text-level-semantics.html#the-cite-element>cite</a></code> and <code id=the-blockquote-element:the-blockquote-element-11><a href=#the-blockquote-element>blockquote</a></code>
  elements for this purpose.</p>



  <h4 id=the-ol-element><span class=secno>4.4.5</span> The <dfn data-dfn-type=element><code>ol</code></dfn> element<a href=#the-ol-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol title="The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.">Element/ol</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-ol-element:concept-element-categories>Categories</a>:<dd><a id=the-ol-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd>If the element's children include at least one <code id=the-ol-element:the-li-element><a href=#the-li-element>li</a></code> element: <a id=the-ol-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-ol-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-ol-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-ol-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-ol-element:the-li-element-2><a href=#the-li-element>li</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-ol-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-ol-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-ol-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-ol-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-ol-element:attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> —  Number the list backwards
     <dd><code id=the-ol-element:attr-ol-start><a href=#attr-ol-start>start</a></code> —  <span>Starting value</span> of the list
     <dd><code id=the-ol-element:attr-ol-type><a href=#attr-ol-type>type</a></code> —  Kind of list marker
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-ol-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-ol>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-ol>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-ol-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLOListElement</code>.</dl>

  <p>The <code id=the-ol-element:the-ol-element><a href=#the-ol-element>ol</a></code> element <a id=the-ol-element:represents href=dom.html#represents>represents</a> a list of items, where the items have been
  intentionally ordered, such that changing the order would change the meaning of the document.</p>

  <p>The items of the list are the <code id=the-ol-element:the-li-element-3><a href=#the-li-element>li</a></code> element child nodes of the <code id=the-ol-element:the-ol-element-2><a href=#the-ol-element>ol</a></code>
  element, in <a id=the-ol-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol#attr-reversed title="The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.">Element/ol#attr-reversed</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>18+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>18+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>≤79+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=ol id=attr-ol-reversed data-dfn-type=element-attr><code>reversed</code></dfn> attribute
  is a <a id=the-ol-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. If present, it indicates that the list is a descending list
  (..., 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, ...).</p>

  <p>The <dfn data-dfn-for=ol id=attr-ol-start data-dfn-type=element-attr><code>start</code></dfn> attribute, if
  present, must be a <a id=the-ol-element:valid-integer href=common-microsyntaxes.html#valid-integer>valid integer</a>. It is used to determine the <span>starting value</span> of the list.</p>

  

  <p>The <dfn data-dfn-for=ol id=attr-ol-type data-dfn-type=element-attr><code>type</code></dfn> attribute can be
  used to specify the kind of marker to use in the list, in the cases where that matters (e.g.
  because items are to be <a id=the-ol-element:referenced href=dom.html#referenced>referenced</a> by their number/letter). The attribute, if
  specified, must have a value that is <a id=the-ol-element:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> one of the characters given in the
  first cell of one of the rows of the following table. </p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Description
     <th colspan=8>Examples for values 1-3 and 3999-4001
   <tbody><tr><td><dfn data-dfn-for=ol/type id=attr-ol-type-keyword-decimal data-dfn-type=attr-value><code>1</code></dfn>
     (U+0031)
     <td><dfn id=attr-ol-type-state-decimal>decimal</dfn>
     <td>Decimal numbers
     <td class=eg><samp>1.</samp> <td class=eg><samp>2.</samp> <td class=eg><samp>3.</samp> <td class=eg>... <td class=eg><samp>3999.</samp> <td class=eg><samp>4000.</samp> <td class=eg><samp>4001.</samp> <td class=eg>...
    <tr><td><dfn data-dfn-for=ol/type id=attr-ol-type-keyword-lower-alpha data-dfn-type=attr-value><code>a</code></dfn> (U+0061)
     <td><dfn id=attr-ol-type-state-lower-alpha>lower-alpha</dfn>
     <td>Lowercase latin alphabet
     <td class=eg><samp>a.</samp> <td class=eg><samp>b.</samp> <td class=eg><samp>c.</samp> <td class=eg>... <td class=eg><samp>ewu.</samp> <td class=eg><samp>ewv.</samp> <td class=eg><samp>eww.</samp> <td class=eg>...
    <tr><td><dfn data-dfn-for=ol/type id=attr-ol-type-keyword-upper-alpha data-dfn-type=attr-value><code>A</code></dfn> (U+0041)
     <td><dfn id=attr-ol-type-state-upper-alpha>upper-alpha</dfn>
     <td>Uppercase latin alphabet
     <td class=eg><samp>A.</samp> <td class=eg><samp>B.</samp> <td class=eg><samp>C.</samp> <td class=eg>... <td class=eg><samp>EWU.</samp> <td class=eg><samp>EWV.</samp> <td class=eg><samp>EWW.</samp> <td class=eg>...
    <tr><td><dfn data-dfn-for=ol/type id=attr-ol-type-keyword-lower-roman data-dfn-type=attr-value><code>i</code></dfn> (U+0069)

     <td><dfn id=attr-ol-type-state-lower-roman>lower-roman</dfn>
     <td>Lowercase roman numerals
     <td class=eg><samp>i.</samp> <td class=eg><samp>ii.</samp> <td class=eg><samp>iii.</samp> <td class=eg>... <td class=eg><samp>mmmcmxcix.</samp> <td class=eg><samp>i̅v̅.</samp> <td class=eg><samp>i̅v̅i.</samp> <td class=eg>...
    <tr><td><dfn data-dfn-for=ol/type id=attr-ol-type-keyword-upper-roman data-dfn-type=attr-value><code>I</code></dfn> (U+0049)
     <td><dfn id=attr-ol-type-state-upper-roman>upper-roman</dfn>
     <td>Uppercase roman numerals
     <td class=eg><samp>I.</samp> <td class=eg><samp>II.</samp> <td class=eg><samp>III.</samp> <td class=eg>... <td class=eg><samp>MMMCMXCIX.</samp> <td class=eg><samp>I̅V̅.</samp> <td class=eg><samp>I̅V̅I.</samp> <td class=eg>...
  </table>

  

  <p class=note>It is possible to redefine the default CSS list styles used to implement this
  attribute in CSS user agents; doing so will affect how list items are rendered.</p>

  

  

  <div class=example>

   <p>The following markup shows a list where the order matters, and where the <code id=the-ol-element:the-ol-element-3><a href=#the-ol-element>ol</a></code>
   element is therefore appropriate. Compare this list to the equivalent list in the <code id=the-ol-element:the-ul-element><a href=#the-ul-element>ul</a></code>
   section to see an example of the same items using the <code id=the-ol-element:the-ul-element-2><a href=#the-ul-element>ul</a></code> element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I have lived in the following countries (given in the order of when
I first lived there):<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Switzerland
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United Kingdom
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United States
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Norway
<c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c-></code></pre>

   <p>Note how changing the order of the list changes the meaning of the document. In the following
   example, changing the relative order of the first two items has changed the birthplace of the
   author:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I have lived in the following countries (given in the order of when
I first lived there):<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United Kingdom
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Switzerland
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United States
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Norway
<c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-ul-element><span class=secno>4.4.6</span> The <dfn data-dfn-type=element><code>ul</code></dfn> element<a href=#the-ul-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul title="The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.">Element/ul</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-ul-element:concept-element-categories>Categories</a>:<dd><a id=the-ul-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd>If the element's children include at least one <code id=the-ul-element:the-li-element><a href=#the-li-element>li</a></code> element: <a id=the-ul-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-ul-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-ul-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-ul-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-ul-element:the-li-element-2><a href=#the-li-element>li</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-ul-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-ul-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-ul-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-ul-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-ul-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-ul>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-ul>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-ul-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLUListElement</code>.</dl>

  <p>The <code id=the-ul-element:the-ul-element><a href=#the-ul-element>ul</a></code> element <a id=the-ul-element:represents href=dom.html#represents>represents</a> a list of items, where the order of the
  items is not important — that is, where changing the order would not materially change the
  meaning of the document.</p>

  <p>The items of the list are the <code id=the-ul-element:the-li-element-3><a href=#the-li-element>li</a></code> element child nodes of the <code id=the-ul-element:the-ul-element-2><a href=#the-ul-element>ul</a></code>
  element.</p>

  <div class=example>

   <p>The following markup shows a list where the order does not matter, and where the
   <code id=the-ul-element:the-ul-element-3><a href=#the-ul-element>ul</a></code> element is therefore appropriate. Compare this list to the equivalent list in the
   <code id=the-ul-element:the-ol-element><a href=#the-ol-element>ol</a></code> section to see an example of the same items using the <code id=the-ul-element:the-ol-element-2><a href=#the-ol-element>ol</a></code>
   element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I have lived in the following countries:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Norway
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Switzerland
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United Kingdom
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United States
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

   <p>Note that changing the order of the list does not change the meaning of the document. The
   items in the snippet above are given in alphabetical order, but in the snippet below they are
   given in order of the size of their current account balance in 2007, without changing the meaning
   of the document whatsoever:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I have lived in the following countries:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Switzerland
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->Norway
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United Kingdom
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->United States
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-menu-element><span class=secno>4.4.7</span> The <dfn id=menus data-dfn-type=element><code>menu</code></dfn> element<a href=#the-menu-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu title="The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).">Element/menu</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-menu-element:concept-element-categories>Categories</a>:<dd><a id=the-menu-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd>If the element's children include at least one <code id=the-menu-element:the-li-element><a href=#the-li-element>li</a></code> element: <a id=the-menu-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-menu-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-menu-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-menu-element:concept-element-content-model>Content model</a>:<dd>Zero or more <code id=the-menu-element:the-li-element-2><a href=#the-li-element>li</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-menu-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-menu-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-menu-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-menu-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-menu-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-menu>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-menu>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-menu-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLMenuElement</code>.</dl>

  <p>The <code id=the-menu-element:the-menu-element><a href=#the-menu-element>menu</a></code> element <a id=the-menu-element:represents href=dom.html#represents>represents</a> a toolbar consisting of its contents, in
  the form of an unordered list of items (represented by <code id=the-menu-element:the-li-element-3><a href=#the-li-element>li</a></code> elements), each of
  which represents a command that the user can perform or activate.</p>

  <p class=note>The <code id=the-menu-element:the-menu-element-2><a href=#the-menu-element>menu</a></code> element is simply a semantic alternative to <code id=the-menu-element:the-ul-element><a href=#the-ul-element>ul</a></code>
  to express an unordered list of commands (a "toolbar").</p>

  <div class=example>
   <p>In this example, a text-editing application uses a <code id=the-menu-element:the-menu-element-3><a href=#the-menu-element>menu</a></code> element to provide a
   series of editing commands:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>menu</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;copy()&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;copy.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Copy&quot;</c-><c- p>&gt;&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;cut()&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;cut.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Cut&quot;</c-><c- p>&gt;&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>button</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;paste()&quot;</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;paste.svg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Paste&quot;</c-><c- p>&gt;&lt;/</c-><c- f>button</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>menu</c-><c- p>&gt;</c-></code></pre>

   <p>Note that the styling to make this look like a conventional toolbar menu is up to the
   application.</p>
  </div>


  <h4 id=the-li-element><span class=secno>4.4.8</span> The <dfn data-dfn-type=element><code>li</code></dfn> element<a href=#the-li-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li title="The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.">Element/li</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-li-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-li-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Inside <code id=the-li-element:the-ol-element><a href=#the-ol-element>ol</a></code> elements.<dd>Inside <code id=the-li-element:the-ul-element><a href=#the-ul-element>ul</a></code> elements.<dd>Inside <code id=the-li-element:the-menu-element><a href=#the-menu-element>menu</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-li-element:concept-element-content-model>Content model</a>:<dd><a id=the-li-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-li-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-li-element:the-li-element><a href=#the-li-element>li</a></code> element's <a href=syntax.html#syntax-end-tag id=the-li-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-li-element:the-li-element-2><a href=#the-li-element>li</a></code> element is immediately followed by another <code id=the-li-element:the-li-element-3><a href=#the-li-element>li</a></code> element or if there is
  no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-li-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-li-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd>If the element is not a child of an <code id=the-li-element:the-ul-element-2><a href=#the-ul-element>ul</a></code> or <code id=the-li-element:the-menu-element-2><a href=#the-menu-element>menu</a></code> element: <code id=the-li-element:attr-li-value><a href=#attr-li-value>value</a></code> —  <span>Ordinal value</span> of the list item
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-li-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-li>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-li>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-li-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLLIElement</code>.</dl>

  <p>The <code id=the-li-element:the-li-element-4><a href=#the-li-element>li</a></code> element <a id=the-li-element:represents href=dom.html#represents>represents</a> a list item. If its parent element is an
  <code id=the-li-element:the-ol-element-2><a href=#the-ol-element>ol</a></code>, <code id=the-li-element:the-ul-element-3><a href=#the-ul-element>ul</a></code>, or <code id=the-li-element:the-menu-element-3><a href=#the-menu-element>menu</a></code> element, then the element is an item of the
  parent element's list, as defined for those elements. Otherwise, the list item has no defined
  list-related relationship to any other <code id=the-li-element:the-li-element-5><a href=#the-li-element>li</a></code> element.</p>

  <p>The <dfn data-dfn-for=li id=attr-li-value data-dfn-type=element-attr><code>value</code></dfn> attribute, if
  present, must be a <a id=the-li-element:valid-integer href=common-microsyntaxes.html#valid-integer>valid integer</a>. It is used to determine the <span>ordinal
  value</span> of the list item, when the <code id=the-li-element:the-li-element-6><a href=#the-li-element>li</a></code>'s <span>list owner</span> is an
  <code id=the-li-element:the-ol-element-3><a href=#the-ol-element>ol</a></code> element.</p>

  

  <div class=example>

   <p>The following example, the top ten movies are listed (in reverse order). Note the way the list
   is given a title by using a <code id=the-li-element:the-figure-element><a href=#the-figure-element>figure</a></code> element and its <code id=the-li-element:the-figcaption-element><a href=#the-figcaption-element>figcaption</a></code>
   element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->The top 10 movies of all time<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ol</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;10&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Josie and the Pussycats<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2001<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;9&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;sh&quot;</c-><c- p>&gt;</c->Црна мачка, бели мачор<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1998<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->A Bug&apos;s Life<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1998<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;7&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Toy Story<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1995<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;6&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Monsters, Inc<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2001<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Cars<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2006<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;4&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Toy Story 2<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1999<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;3&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Finding Nemo<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2003<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->The Incredibles<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2004<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Ratatouille<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2007<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

   <p>The markup could also be written as follows, using the <code id=the-li-element:attr-ol-reversed><a href=#attr-ol-reversed>reversed</a></code> attribute on the <code id=the-li-element:the-ol-element-4><a href=#the-ol-element>ol</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->The top 10 movies of all time<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>ol</c-> <c- e>reversed</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Josie and the Pussycats<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2001<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;sh&quot;</c-><c- p>&gt;</c->Црна мачка, бели мачор<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1998<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->A Bug&apos;s Life<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1998<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Toy Story<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1995<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Monsters, Inc<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2001<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Cars<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2006<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Toy Story 2<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 1999<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Finding Nemo<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2003<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->The Incredibles<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2004<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Ratatouille<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->, 2007<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p class=note>While it is conforming to include heading elements (e.g. <code id=the-li-element:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>) inside
  <code id=the-li-element:the-li-element-7><a href=#the-li-element>li</a></code> elements, it likely does not convey the semantics that the author intended. A
  heading starts a new section, so a heading in a list implicitly splits the list into spanning
  multiple sections.</p>



  <h4 id=the-dl-element><span class=secno>4.4.9</span> The <dfn data-dfn-type=element><code>dl</code></dfn> element<a href=#the-dl-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl title="The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).">Element/dl</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-dl-element:concept-element-categories>Categories</a>:<dd><a id=the-dl-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd>If the element's children include at least one name-value group: <a id=the-dl-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-dl-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-dl-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-dl-element:concept-element-content-model>Content model</a>:<dd>Either: Zero or more groups each consisting of one or more <code id=the-dl-element:the-dt-element><a href=#the-dt-element>dt</a></code> elements followed by one or more <code id=the-dl-element:the-dd-element><a href=#the-dd-element>dd</a></code> elements, optionally intermixed with <a id=the-dl-element:script-supporting-elements-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a>.<dd>Or: One or more <code id=the-dl-element:the-div-element><a href=#the-div-element>div</a></code> elements, optionally intermixed with <a id=the-dl-element:script-supporting-elements-2-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-dl-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-dl-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-dl-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-dl-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-dl>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-dl>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-dl-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLDListElement</code>.</dl>

  <p>The <code id=the-dl-element:the-dl-element><a href=#the-dl-element>dl</a></code> element <a id=the-dl-element:represents href=dom.html#represents>represents</a> an association list consisting of zero or
  more name-value groups (a description list). A name-value group consists of one or more names
  (<code id=the-dl-element:the-dt-element-2><a href=#the-dt-element>dt</a></code> elements, possibly as children of a <code id=the-dl-element:the-div-element-2><a href=#the-div-element>div</a></code> element child) followed by
  one or more values (<code id=the-dl-element:the-dd-element-2><a href=#the-dd-element>dd</a></code> elements, possibly as children of a <code id=the-dl-element:the-div-element-3><a href=#the-div-element>div</a></code> element
  child), ignoring any nodes other than <code id=the-dl-element:the-dt-element-3><a href=#the-dt-element>dt</a></code> and <code id=the-dl-element:the-dd-element-3><a href=#the-dd-element>dd</a></code> element children, and
  <code id=the-dl-element:the-dt-element-4><a href=#the-dt-element>dt</a></code> and <code id=the-dl-element:the-dd-element-4><a href=#the-dd-element>dd</a></code> elements that are children of <code id=the-dl-element:the-div-element-4><a href=#the-div-element>div</a></code> element
  children. Within a single <code id=the-dl-element:the-dl-element-2><a href=#the-dl-element>dl</a></code> element, there should not be more than one
  <code id=the-dl-element:the-dt-element-5><a href=#the-dt-element>dt</a></code> element for each name.</p>

  <p>Name-value groups may be terms and definitions, metadata topics and values, questions and
  answers, or any other groups of name-value data.</p>

  <p>The values within a group are alternatives; multiple paragraphs forming part of the same value
  must all be given within the same <code id=the-dl-element:the-dd-element-5><a href=#the-dd-element>dd</a></code> element.</p>

  <p>The order of the list of groups, and of the names and values within each group, may be
  significant.</p>

  <p>In order to annotate groups with <a id=the-dl-element:microdata href=microdata.html#microdata>microdata</a> attributes, or other <a id=the-dl-element:global-attributes-2 href=dom.html#global-attributes>global
  attributes</a> that apply to whole groups, or just for styling purposes, each group in a
  <code id=the-dl-element:the-dl-element-3><a href=#the-dl-element>dl</a></code> element can be wrapped in a <code id=the-dl-element:the-div-element-5><a href=#the-div-element>div</a></code> element. This does not change the
  semantics of the <code id=the-dl-element:the-dl-element-4><a href=#the-dl-element>dl</a></code> element.</p>

  

  <div class=example>

   <p>In the following example, one entry ("Authors") is linked to two values ("John" and
   "Luke").</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> Authors
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> John
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> Luke
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> Editor
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> Frank
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>

   <p>In the following example, one definition is linked to two terms.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-US&quot;</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->color<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <span lang='en-GB'><c- p>&lt;</c-><c- f>dt</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-GB&quot;</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->colour<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c-></span>
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>

   <p>The following example illustrates the use of the <code id=the-dl-element:the-dl-element-5><a href=#the-dl-element>dl</a></code> element to mark up metadata
   of sorts. At the end of the example, one group has two metadata labels ("Authors" and "Editors")
   and two values ("Robert Rothman" and "Daniel Jackson"). This example also uses the
   <code id=the-dl-element:the-div-element-6><a href=#the-div-element>div</a></code> element around the groups of <code id=the-dl-element:the-dt-element-6><a href=#the-dt-element>dt</a></code> and <code id=the-dl-element:the-dd-element-6><a href=#the-dd-element>dd</a></code> element, to aid
   with styling.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>div</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> Last modified time <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> 2004-12-23T23:33Z <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>div</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> Recommended update interval <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> 60s <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>div</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> Authors <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> Editors <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> Robert Rothman <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> Daniel Jackson <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>

   <p>The following example shows the <code id=the-dl-element:the-dl-element-6><a href=#the-dl-element>dl</a></code> element used to give a set of instructions.
   The order of the instructions here is important (in the other examples, the order of the blocks
   was not important).</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Determine the victory points as follows (use the
first matching case):<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> If you have exactly five gold coins <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> You get five victory points <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> If you have one or more gold coins, and you have one or more silver coins <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> You get two victory points <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> If you have one or more silver coins <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> You get one victory point <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c-> Otherwise <c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> You get no victory points <c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>

   <p>The following snippet shows a <code id=the-dl-element:the-dl-element-7><a href=#the-dl-element>dl</a></code> element being used as a glossary. Note the use
   of <code id=the-dl-element:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code> to indicate the word being defined.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->Apartment<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c->, n.<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->An execution context grouping one or more threads with one or
 more COM objects.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->Flat<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c->, n.<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->A deflated tire.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->Home<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;</c->, n.<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->The user&apos;s login directory.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>

   <p>This example uses <a id=the-dl-element:microdata-2 href=microdata.html#microdata>microdata</a> attributes in a <code id=the-dl-element:the-dl-element-8><a href=#the-dl-element>dl</a></code> element, together
   with the <code id=the-dl-element:the-div-element-7><a href=#the-div-element>div</a></code> element, to annotate the ice cream desserts at a French restaurant.</p>
   

   <pre lang=fr><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>div</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Product&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;name&quot;</c-><c- p>&gt;</c->Café ou Chocolat Liégeois
  <c- p>&lt;</c-><c- f>dd</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;offers&quot;</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Offer&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>span</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;price&quot;</c-><c- p>&gt;</c->3.50<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>data</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;priceCurrency&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;EUR&quot;</c-><c- p>&gt;</c->€<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;description&quot;</c-><c- p>&gt;</c->
   2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly
 <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->

 <c- p>&lt;</c-><c- f>div</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Product&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;name&quot;</c-><c- p>&gt;</c->Américaine
  <c- p>&lt;</c-><c- f>dd</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;offers&quot;</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Offer&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>span</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;price&quot;</c-><c- p>&gt;</c->3.50<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>data</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;priceCurrency&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;EUR&quot;</c-><c- p>&gt;</c->€<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;description&quot;</c-><c- p>&gt;</c->
   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
 <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

   <p>Without the <code id=the-dl-element:the-div-element-8><a href=#the-div-element>div</a></code> element the markup would need to use the <code id=the-dl-element:attr-itemref><a href=microdata.html#attr-itemref>itemref</a></code> attribute to link the data in the <code id=the-dl-element:the-dd-element-7><a href=#the-dd-element>dd</a></code> elements
   with the item, as follows.</p>

   <pre lang=fr><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Product&quot;</c-> <c- e>itemref</c-><c- o>=</c-><c- s>&quot;1-offer 1-description&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>span</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;name&quot;</c-><c- p>&gt;</c->Café ou Chocolat Liégeois<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;1-offer&quot;</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;offers&quot;</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Offer&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>span</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;price&quot;</c-><c- p>&gt;</c->3.50<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>data</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;priceCurrency&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;EUR&quot;</c-><c- p>&gt;</c->€<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;1-description&quot;</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;description&quot;</c-><c- p>&gt;</c->
  2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly

 <c- p>&lt;</c-><c- f>dt</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Product&quot;</c-> <c- e>itemref</c-><c- o>=</c-><c- s>&quot;2-offer 2-description&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>span</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;name&quot;</c-><c- p>&gt;</c->Américaine<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;2-offer&quot;</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;offers&quot;</c-> <c- e>itemscope</c-> <c- e>itemtype</c-><c- o>=</c-><c- s>&quot;http://schema.org/Offer&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>span</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;price&quot;</c-><c- p>&gt;</c->3.50<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>data</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;priceCurrency&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;EUR&quot;</c-><c- p>&gt;</c->€<c- p>&lt;/</c-><c- f>data</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;2-description&quot;</c-> <c- e>itemprop</c-><c- o>=</c-><c- s>&quot;description&quot;</c-><c- p>&gt;</c->
  1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p class=note>The <code id=the-dl-element:the-dl-element-9><a href=#the-dl-element>dl</a></code> element is inappropriate for marking up dialogue. See some <a href=semantics-other.html#conversations>examples of how to mark up dialogue</a>.</p>



  <h4 id=the-dt-element><span class=secno>4.4.10</span> The <dfn data-dfn-type=element><code>dt</code></dfn> element<a href=#the-dt-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt title="The <dt> HTML element specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.">Element/dt</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-dt-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-dt-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Before <code id=the-dt-element:the-dd-element><a href=#the-dd-element>dd</a></code> or <code id=the-dt-element:the-dt-element><a href=#the-dt-element>dt</a></code> elements inside <code id=the-dt-element:the-dl-element><a href=#the-dl-element>dl</a></code> elements.<dd>Before <code id=the-dt-element:the-dd-element-2><a href=#the-dd-element>dd</a></code> or <code id=the-dt-element:the-dt-element-2><a href=#the-dt-element>dt</a></code> elements inside <code id=the-dt-element:the-div-element><a href=#the-div-element>div</a></code> elements that are children of a <code id=the-dt-element:the-dl-element-2><a href=#the-dl-element>dl</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-dt-element:concept-element-content-model>Content model</a>:<dd><a id=the-dt-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>, but with no <code id=the-dt-element:the-header-element><a href=sections.html#the-header-element>header</a></code>, <code id=the-dt-element:the-footer-element><a href=sections.html#the-footer-element>footer</a></code>, <a id=the-dt-element:sectioning-content-2 href=dom.html#sectioning-content-2>sectioning content</a>, or <a id=the-dt-element:heading-content-2 href=dom.html#heading-content-2>heading content</a> descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-dt-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-dt-element:the-dt-element-3><a href=#the-dt-element>dt</a></code> element's <a href=syntax.html#syntax-end-tag id=the-dt-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-dt-element:the-dt-element-4><a href=#the-dt-element>dt</a></code> element is immediately followed by another <code id=the-dt-element:the-dt-element-5><a href=#the-dt-element>dt</a></code> element or a
  <code id=the-dt-element:the-dd-element-3><a href=#the-dd-element>dd</a></code> element.<dt><a href=dom.html#concept-element-attributes id=the-dt-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-dt-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-dt-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-dt>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-dt>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-dt-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-dt-element:the-dt-element-6><a href=#the-dt-element>dt</a></code> element <a id=the-dt-element:represents href=dom.html#represents>represents</a> the term, or name, part of a
  term-description group in a description list (<code id=the-dt-element:the-dl-element-3><a href=#the-dl-element>dl</a></code> element).</p>

  <p class=note>The <code id=the-dt-element:the-dt-element-7><a href=#the-dt-element>dt</a></code> element itself, when used in a <code id=the-dt-element:the-dl-element-4><a href=#the-dl-element>dl</a></code> element, does
  not indicate that its contents are a term being defined, but this can be indicated using the
  <code id=the-dt-element:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code> element.</p>

  <div class=example>

   <p>This example shows a list of frequently asked questions (a FAQ) marked up using the
   <code id=the-dt-element:the-dt-element-8><a href=#the-dt-element>dt</a></code> element for questions and the <code id=the-dt-element:the-dd-element-4><a href=#the-dd-element>dd</a></code> element for answers.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->FAQ<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->What do we want?<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->Our data.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->When do we want it?<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->Now.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Where is it?<c- p>&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->We are not sure.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-dd-element><span class=secno>4.4.11</span> The <dfn data-dfn-type=element><code>dd</code></dfn> element<a href=#the-dd-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd title="The <dd> HTML element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).">Element/dd</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-dd-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-dd-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>After <code id=the-dd-element:the-dt-element><a href=#the-dt-element>dt</a></code> or <code id=the-dd-element:the-dd-element><a href=#the-dd-element>dd</a></code> elements inside <code id=the-dd-element:the-dl-element><a href=#the-dl-element>dl</a></code> elements.<dd>After <code id=the-dd-element:the-dt-element-2><a href=#the-dt-element>dt</a></code> or <code id=the-dd-element:the-dd-element-2><a href=#the-dd-element>dd</a></code> elements inside <code id=the-dd-element:the-div-element><a href=#the-div-element>div</a></code> elements that are children of a <code id=the-dd-element:the-dl-element-2><a href=#the-dl-element>dl</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-dd-element:concept-element-content-model>Content model</a>:<dd><a id=the-dd-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-dd-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-dd-element:the-dd-element-3><a href=#the-dd-element>dd</a></code> element's <a href=syntax.html#syntax-end-tag id=the-dd-element:syntax-end-tag>end tag</a> can be omitted if the
  <code id=the-dd-element:the-dd-element-4><a href=#the-dd-element>dd</a></code> element is immediately followed by another <code id=the-dd-element:the-dd-element-5><a href=#the-dd-element>dd</a></code> element or a
  <code id=the-dd-element:the-dt-element-3><a href=#the-dt-element>dt</a></code> element, or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-dd-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-dd-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-dd-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-dd>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-dd>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-dd-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-dd-element:the-dd-element-6><a href=#the-dd-element>dd</a></code> element <a id=the-dd-element:represents href=dom.html#represents>represents</a> the description, definition, or value, part
  of a term-description group in a description list (<code id=the-dd-element:the-dl-element-3><a href=#the-dl-element>dl</a></code> element).</p>

  <div class=example>

   <p>A <code id=the-dd-element:the-dl-element-4><a href=#the-dl-element>dl</a></code> can be used to define a vocabulary list, like in a dictionary. In the
   following example, each entry, given by a <code id=the-dd-element:the-dt-element-4><a href=#the-dt-element>dt</a></code> with a <code id=the-dd-element:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code>, has several
   <code id=the-dd-element:the-dd-element-7><a href=#the-dd-element>dd</a></code>s, showing the various parts of the definition.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->happiness<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;pronunciation&quot;</c-><c- p>&gt;</c->/ˈhæpinəs/<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;part-of-speech&quot;</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->n.<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;&lt;/</c-><c- f>i</c-><c- p>&gt;&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->The state of being happy.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c->Good fortune; success. <c- p>&lt;</c-><c- f>q</c-><c- p>&gt;</c->Oh <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->happiness<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;</c->! It worked!<c- p>&lt;/</c-><c- f>q</c-><c- p>&gt;&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;&lt;</c-><c- f>dfn</c-><c- p>&gt;</c->rejoice<c- p>&lt;/</c-><c- f>dfn</c-><c- p>&gt;&lt;/</c-><c- f>dt</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;pronunciation&quot;</c-><c- p>&gt;</c->/rɪˈdʒɔɪs/<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;&lt;</c-><c- f>i</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;part-of-speech&quot;</c-><c- p>&gt;&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->v.intr.<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> To be delighted oneself.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;&lt;</c-><c- f>i</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;part-of-speech&quot;</c-><c- p>&gt;&lt;</c-><c- f>abbr</c-><c- p>&gt;</c->v.tr.<c- p>&lt;/</c-><c- f>abbr</c-><c- p>&gt;&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> To cause one to be delighted.<c- p>&lt;/</c-><c- f>dd</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h4 id=the-figure-element><span class=secno>4.4.12</span> The <dfn data-dfn-type=element><code>figure</code></dfn> element<a href=#the-figure-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure title="The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.">Element/figure</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>8+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-figure-element:concept-element-categories>Categories</a>:<dd><a id=the-figure-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-figure-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-figure-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-figure-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-figure-element:concept-element-content-model>Content model</a>:<dd>Either: one <code id=the-figure-element:the-figcaption-element><a href=#the-figcaption-element>figcaption</a></code> element followed by <a id=the-figure-element:flow-content-2-3 href=dom.html#flow-content-2>flow content</a>.<dd>Or: <a id=the-figure-element:flow-content-2-4 href=dom.html#flow-content-2>flow content</a> followed by one <code id=the-figure-element:the-figcaption-element-2><a href=#the-figcaption-element>figcaption</a></code> element.<dd>Or: <a id=the-figure-element:flow-content-2-5 href=dom.html#flow-content-2>flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-figure-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-figure-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-figure-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-figure-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-figure>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-figure>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-figure-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-figure-element:the-figure-element><a href=#the-figure-element>figure</a></code> element <a id=the-figure-element:represents href=dom.html#represents>represents</a> some <a id=the-figure-element:flow-content-2-6 href=dom.html#flow-content-2>flow content</a>,
  optionally with a caption, that is self-contained (like a complete sentence) and is typically
  <a id=the-figure-element:referenced href=dom.html#referenced>referenced</a> as a single unit from the main flow of the document.</p>

  <p class=note>"Self-contained" in this context does not necessarily mean independent. For
  example, each sentence in a paragraph is self-contained; an image that is part of a sentence would
  be inappropriate for <code id=the-figure-element:the-figure-element-2><a href=#the-figure-element>figure</a></code>, but an entire sentence made of images would be
  fitting.</p>

  <p>The element can thus be used to annotate illustrations, diagrams, photos, code listings,
  etc.</p>

  <div id=figure-note-about-references class=note><a href=#figure-note-about-references class=self-link></a>
   <p>When a <code id=the-figure-element:the-figure-element-3><a href=#the-figure-element>figure</a></code> is referred to from the main content of the document by identifying
   it by its caption (e.g., by figure number), it enables such content to be easily moved away from
   that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix,
   without affecting the flow of the document.</p>

   <p>If a <code id=the-figure-element:the-figure-element-4><a href=#the-figure-element>figure</a></code> element is <a id=the-figure-element:referenced-2 href=dom.html#referenced>referenced</a> by its relative position, e.g.,
   "in the photograph above" or "as the next figure shows", then moving the figure would disrupt the
   page's meaning. Authors are encouraged to consider using labels to refer to figures, rather than
   using such relative references, so that the page can easily be restyled without affecting the
   page's meaning.</p>
  </div>

  <p>The  <code id=the-figure-element:the-figcaption-element-3><a href=#the-figcaption-element>figcaption</a></code> element child of the element, if any,
  represents the caption of the <code id=the-figure-element:the-figure-element-5><a href=#the-figure-element>figure</a></code> element's contents. If there is no child
  <code id=the-figure-element:the-figcaption-element-4><a href=#the-figcaption-element>figcaption</a></code> element, then there is no caption.</p>

  <p>A <code id=the-figure-element:the-figure-element-6><a href=#the-figure-element>figure</a></code> element's contents are part of the surrounding flow. If the purpose of
  the page is to display the figure, for example a photograph on an image sharing site, the
  <code id=the-figure-element:the-figure-element-7><a href=#the-figure-element>figure</a></code> and <code id=the-figure-element:the-figcaption-element-5><a href=#the-figcaption-element>figcaption</a></code> elements can be used to explicitly provide a
  caption for that figure. For content that is only tangentially related, or that serves a separate
  purpose than the surrounding flow, the <code id=the-figure-element:the-aside-element><a href=sections.html#the-aside-element>aside</a></code> element should be used (and can itself
  wrap a <code id=the-figure-element:the-figure-element-8><a href=#the-figure-element>figure</a></code>). For example, a pull quote that repeats content from an
  <code id=the-figure-element:the-article-element><a href=sections.html#the-article-element>article</a></code> would be more appropriate in an <code id=the-figure-element:the-aside-element-2><a href=sections.html#the-aside-element>aside</a></code> than in a
  <code id=the-figure-element:the-figure-element-9><a href=#the-figure-element>figure</a></code>, because it isn't part of the content, it's a repetition of the content for
  the purposes of enticing readers or highlighting key topics.</p>

  <div class=example>
   <p>This example shows the <code id=the-figure-element:the-figure-element-10><a href=#the-figure-element>figure</a></code> element to mark up a code listing.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->In <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#l4&quot;</c-><c- p>&gt;</c->listing 4<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> we see the primary core interface
API declaration.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>figure</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;l4&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Listing 4. The primary core interface API declaration.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>pre</c-><c- p>&gt;&lt;</c-><c- f>code</c-><c- p>&gt;</c->interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence<c- ni>&amp;lt;</c->byte&gt; data);
 undefined initSelfDestruct();
}<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;&lt;/</c-><c- f>pre</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The API is designed to use UTF-8.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>Here we see a <code id=the-figure-element:the-figure-element-11><a href=#the-figure-element>figure</a></code> element to mark up a photo that is the main content of the
   page (as in a gallery).</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Bubbles at work — My Gallery™<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;bubbles-work.jpeg&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;Bubbles, sitting in his office chair, works on his</c->
<c- s>           latest project intently.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Bubbles at work<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;19414.html&quot;</c-><c- p>&gt;</c->Prev<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> — <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;19416.html&quot;</c-><c- p>&gt;</c->Next<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>nav</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>In this example, we see an image that is <em>not</em> a figure, as well as an image and a
   video that are. The first image is literally part of the example's second sentence, so it's not a
   self-contained unit, and thus <code id=the-figure-element:the-figure-element-12><a href=#the-figure-element>figure</a></code> would be inappropriate.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Malinko&apos;s comics<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This case centered on some sort of &quot;intellectual property&quot;
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<c- p>&lt;</c-><c- f>blockquote</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;promblem-packed-action.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;ROUGH COPY! Promblem-Packed Action!&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>blockquote</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;ex-a.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Two squiggles on a dirty piece of paper.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Exhibit A. The alleged <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->rough copy<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> comic.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;ex-b.mov&quot;</c-><c- p>&gt;&lt;/</c-><c- f>video</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Exhibit B. The <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Rough Copy<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> trailer.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The case was resolved out of court.</code></pre>
  </div>

  <div class=example>
   <p>Here, a part of a poem is marked up using <code id=the-figure-element:the-figure-element-13><a href=#the-figure-element>figure</a></code>.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->&apos;Twas brillig, and the slithy toves<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
 Did gyre and gimble in the wabe;<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
 All mimsy were the borogoves,<c- p>&lt;</c-><c- f>br</c-><c- p>&gt;</c->
 And the mome raths outgrabe.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Jabberwocky<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> (first verse). Lewis Carroll, 1832-98<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>In this example, which could be part of a much larger work discussing a castle, nested
   <code id=the-figure-element:the-figure-element-14><a href=#the-figure-element>figure</a></code> elements are used to provide both a group caption and individual captions for
   each figure in the group:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->The castle through the ages: 1423, 1858, and 1999 respectively.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Etching. Anonymous, ca. 1423.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;castle1423.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The castle has one tower, and a tall wall around it.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Oil-based paint on canvas. Maria Towle, 1858.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;castle1858.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The castle now has two towers and two walls.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Film photograph. Peter Jankle, 1999.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;castle1999.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;The castle lies in ruins, the original tower all that remains in one piece.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>The previous example could also be more succinctly written as follows (using <code id=the-figure-element:attr-title><a href=dom.html#attr-title>title</a></code> attributes in place of the nested
   <code id=the-figure-element:the-figure-element-15><a href=#the-figure-element>figure</a></code>/<code id=the-figure-element:the-figcaption-element-6><a href=#the-figcaption-element>figcaption</a></code> pairs):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;castle1423.jpeg&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Etching. Anonymous, ca. 1423.&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;The castle has one tower, and a tall wall around it.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;castle1858.jpeg&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Oil-based paint on canvas. Maria Towle, 1858.&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;The castle now has two towers and two walls.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;castle1999.jpeg&quot;</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Film photograph. Peter Jankle, 1999.&quot;</c->
      <c- e>alt</c-><c- o>=</c-><c- s>&quot;The castle lies in ruins, the original tower all that remains in one piece.&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->The castle through the ages: 1423, 1858, and 1999 respectively.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>The figure is sometimes <a id=the-figure-element:referenced-3 href=dom.html#referenced>referenced</a> only implicitly from the content:</p>

   

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Fiscal negotiations stumble in Congress as deadline nears<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;obama-reid.jpeg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Obama and Reid sit together smiling in the Oval Office.&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->Barack Obama and Harry Reid. White House press photograph.<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
 grasping for a way to reopen the government and raise the country&apos;s borrowing authority with a
 Thursday deadline drawing near.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 ...
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h4 id=the-figcaption-element><span class=secno>4.4.13</span> The <dfn data-dfn-type=element><code>figcaption</code></dfn> element<a href=#the-figcaption-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption title="The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.">Element/figcaption</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>8+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-figcaption-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-figcaption-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As the first or last child of a <code id=the-figcaption-element:the-figure-element><a href=#the-figure-element>figure</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-figcaption-element:concept-element-content-model>Content model</a>:<dd><a id=the-figcaption-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-figcaption-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-figcaption-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-figcaption-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-figcaption-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-figcaption>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-figcaption>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-figcaption-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-figcaption-element:the-figcaption-element><a href=#the-figcaption-element>figcaption</a></code> element <a id=the-figcaption-element:represents href=dom.html#represents>represents</a> a caption or legend for the rest of
  the contents of the <code id=the-figcaption-element:the-figcaption-element-2><a href=#the-figcaption-element>figcaption</a></code> element's parent <code id=the-figcaption-element:the-figure-element-2><a href=#the-figure-element>figure</a></code> element.</p>

  <div class=example>
   <p>The element can contain additional information about the source:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->A duck.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>small</c-><c- p>&gt;</c->Photograph courtesy of 🌟 News.<c- p>&lt;/</c-><c- f>small</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Average rent for 3-room apartments, excluding non-profit apartments<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Zürich’s Statistics Office — <c- p>&lt;</c-><c- f>time</c-> <c- e>datetime</c-><c- o>=</c-><c- s>2017-11-14</c-><c- p>&gt;</c->14 November 2017<c- p>&lt;/</c-><c- f>time</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h4 id=the-main-element><span class=secno>4.4.14</span> The <dfn data-dfn-type=element><code>main</code></dfn> element<a href=#the-main-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main title="The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.">Element/main</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>21+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera yes"><span>Opera</span><span>16+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-main-element:concept-element-categories>Categories</a>:<dd><a id=the-main-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-main-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-main-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-main-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected, but only if it is a <a href=#hierarchically-correct-main-element id=the-main-element:hierarchically-correct-main-element>hierarchically correct
   <code>main</code> element</a>.<dt><a href=dom.html#concept-element-content-model id=the-main-element:concept-element-content-model>Content model</a>:<dd><a id=the-main-element:flow-content-2-3 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-main-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-main-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-main-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-main-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-main>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-main>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-main-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-main-element:the-main-element><a href=#the-main-element>main</a></code> element <a id=the-main-element:represents href=dom.html#represents>represents</a> the dominant contents of the
  document.</p>

  <p>A document must not have more than one <code id=the-main-element:the-main-element-2><a href=#the-main-element>main</a></code> element that does not have the <code id=the-main-element:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute specified.</p>

  <p>A <dfn id=hierarchically-correct-main-element>hierarchically correct <code>main</code> element</dfn> is one whose ancestor elements
  are limited to <code id=the-main-element:the-html-element><a href=semantics.html#the-html-element>html</a></code>, <code id=the-main-element:the-body-element><a href=sections.html#the-body-element>body</a></code>, <code id=the-main-element:the-div-element><a href=#the-div-element>div</a></code>, <code id=the-main-element:the-form-element><a href=forms.html#the-form-element>form</a></code> without
  an <a href=https://w3c.github.io/aria/#dfn-accessible-name id=the-main-element:concept-accessible-name data-x-internal=concept-accessible-name>accessible name</a>, and <a href=custom-elements.html#autonomous-custom-element id=the-main-element:autonomous-custom-element>autonomous custom elements</a>. Each <code id=the-main-element:the-main-element-3><a href=#the-main-element>main</a></code> element must be a
  <a href=#hierarchically-correct-main-element id=the-main-element:hierarchically-correct-main-element-2>hierarchically correct <code>main</code> element</a>.</p>

  <div class=example>

   <p>In this example, the author has used a presentation where each component of the page is
   rendered in a box. To wrap the main content of the page (as opposed to the header, the footer,
   the navigation bar, and a sidebar), the <code id=the-main-element:the-main-element-4><a href=#the-main-element>main</a></code> element is used.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->RPG System 17<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
 <c- f>header</c-><c- o>,</c-> <c- f>nav</c-><c- o>,</c-> <c- f>aside</c-><c- o>,</c-> <c- f>main</c-><c- o>,</c-> <c- f>footer</c-> <c- p>{</c->
   <c- k>margin</c-><c- p>:</c-> <c- mf>0.5</c-><c- b>em</c-><c- p>;</c-> <c- k>border</c-><c- p>:</c-> <c- kc>thin</c-> <c- kc>solid</c-><c- p>;</c-> <c- k>padding</c-><c- p>:</c-> <c- mf>0.5</c-><c- b>em</c-><c- p>;</c->
   <c- k>background</c-><c- p>:</c-> <c- mh>#EFF</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> <c- kc>black</c-><c- p>;</c-> <c- k>box-shadow</c-><c- p>:</c-> <c- mi>0</c-> <c- mi>0</c-> <c- mf>0.25</c-><c- b>em</c-> <c- mh>#033</c-><c- p>;</c->
 <c- p>}</c->
 <c- f>h1</c-><c- o>,</c-> <c- f>h2</c-><c- o>,</c-> <c- f>p</c-> <c- p>{</c-> <c- k>margin</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c-> <c- p>}</c->
 <c- f>nav</c-><c- o>,</c-> <c- f>main</c-> <c- p>{</c-> <c- k>float</c-><c- p>:</c-> <c- kc>left</c-><c- p>;</c-> <c- p>}</c->
 <c- f>aside</c-> <c- p>{</c-> <c- k>float</c-><c- p>:</c-> <c- kc>right</c-><c- p>;</c-> <c- p>}</c->
 <c- f>footer</c-> <c- p>{</c-> <c- k>clear</c-><c- p>:</c-> <c- kc>both</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->System Eighteen<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;../16/&quot;</c-><c- p>&gt;</c->← System 17<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;../18/&quot;</c-><c- p>&gt;</c->RPXIX →<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>nav</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>aside</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This system has no HP mechanic, so there&apos;s no healing.
<c- p>&lt;/</c-><c- f>aside</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>main</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Character creation<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Attributes (magic, strength, agility) are purchased at the cost of one point per level.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Rolls<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>main</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Copyright © 2013
<c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>In the following example, multiple <code id=the-main-element:the-main-element-5><a href=#the-main-element>main</a></code> elements are used and script is used to
   make navigation work without a server roundtrip and to set the <code id=the-main-element:attr-hidden-2><a href=interaction.html#attr-hidden>hidden</a></code> attribute on those that are not current:

   <pre><code class='html'><c- cp>&lt;!doctype html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>en-CA</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>meta</c-> <c- e>charset</c-><c- o>=</c-><c- s>utf-8</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c-> … <c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>stylesheet</c-> <c- e>href</c-><c- o>=</c-><c- s>spa.css</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-> <c- e>src</c-><c- o>=</c-><c- s>spa.js</c-> <c- e>async</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>nav</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>/</c-><c- p>&gt;</c->Home<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>/about</c-><c- p>&gt;</c->About<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>/contact</c-><c- p>&gt;</c->Contact<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>nav</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>main</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Home<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 …
<c- p>&lt;/</c-><c- f>main</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>main</c-> <c- e>hidden</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->About<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 …
<c- p>&lt;/</c-><c- f>main</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>main</c-> <c- e>hidden</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Contact<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 …
<c- p>&lt;/</c-><c- f>main</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->Made with ❤️ by <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>https://example.com/</c-><c- p>&gt;</c->Example 👻<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-search-element><span class=secno>4.4.15</span> The <dfn data-dfn-type=element><code>search</code></dfn> element<a href=#the-search-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="No support in current engines." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search title="The <search> HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The <search> element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.">Element/search</a><p class=less-than-two-engines-text>No support in current engines.<div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari no"><span>Safari</span><span>No</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera no"><span>Opera</span><span>No</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android no"><span>Chrome Android</span><span>No</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-search-element:concept-element-categories>Categories</a>:<dd><a id=the-search-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-search-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-search-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-search-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-search-element:concept-element-content-model>Content model</a>:<dd><a id=the-search-element:flow-content-2-3 href=dom.html#flow-content-2>Flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-search-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-search-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-search-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-search-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-search>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-search>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-search-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLElement</code>.</dl>

  <p>The <code id=the-search-element:the-search-element><a href=#the-search-element>search</a></code> element <a id=the-search-element:represents href=dom.html#represents>represents</a> a part of a document or application
  that contains a set of form controls or other content related to performing a search or filtering
  operation. This could be a search of the web site or application; a way of searching or filtering
  search results on the current web page; or a global or Internet-wide search function.</p>

  <p class=note>It's not appropriate to use the <code id=the-search-element:the-search-element-2><a href=#the-search-element>search</a></code> element just for presenting
  search results, though suggestions and links as part of "quick search" results can be
  included as part of a search feature. Rather, a returned web page of search results would instead
  be expected to be presented as part of the main content of that web page.</p>

  <div class=example>
   <p>In the following example, the author is including a search form within the
   <code id=the-search-element:the-header-element><a href=sections.html#the-header-element>header</a></code> of the web page:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/&quot;</c-><c- p>&gt;</c->My fancy blog<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  ...
  <c- p>&lt;</c-><c- f>search</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;search.php&quot;</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;query&quot;</c-><c- p>&gt;</c->Find an article<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;query&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;q&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;search&quot;</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;submit&quot;</c-><c- p>&gt;</c->Go!<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>search</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
   <p>In this example, the author has implemented their web application's search functionality
   entirely with JavaScript. There is no use of the <code id=the-search-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element to perform
   server-side submission, but the containing <code id=the-search-element:the-search-element-3><a href=#the-search-element>search</a></code> element semantically identifies
   the purpose of the descendant content as representing search capabilities.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>search</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
    Find and filter your query
    <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;search&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;query&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;checkbox&quot;</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;exact-only&quot;</c-><c- p>&gt;</c->
    Exact matches only
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->

  <c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>h3</c-><c- p>&gt;</c->Results found:<c- p>&lt;/</c-><c- f>h3</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>ul</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;results&quot;</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;services/consulting&quot;</c-><c- p>&gt;</c->Consulting services<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
          Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
        <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
      <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
      ...
    <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
    <c- c>&lt;!--</c->
<c- c>      when a query returns or filters out all results</c->
<c- c>      render the no results message here</c->
<c- c>    --&gt;</c->
    <c- p>&lt;</c-><c- f>output</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;no-results&quot;</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>search</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class=example>
    <p>In the following example, the page has two search features. The first is located in the web page's
    <code id=the-search-element:the-header-element-2><a href=sections.html#the-header-element>header</a></code> and serves as a global mechanism to search the web site's content. Its purpose is
    indicated by its specified <code id=the-search-element:the-title-element><a href=semantics.html#the-title-element>title</a></code> attribute. The second is included as part of the main content
    of the page, as it represents a mechanism to search and filter the content of the current page. It contains
    a heading to indicate its purpose.</p>

    <pre><code class='html'><c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
    ...
    <c- p>&lt;</c-><c- f>search</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;Website&quot;</c-><c- p>&gt;</c->
      ...
    <c- p>&lt;/</c-><c- f>search</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>main</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Hotels near your location<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>search</c-><c- p>&gt;</c->
       <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Filter results<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
       ...
     <c- p>&lt;/</c-><c- f>search</c-><c- p>&gt;</c->
     <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
      <c- c>&lt;!-- search result content --&gt;</c->
    <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>main</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c-></code></pre>
  </div>


  <h4 id=the-div-element><span class=secno>4.4.16</span> The <dfn data-dfn-type=element><code>div</code></dfn> element<a href=#the-div-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div title="The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).">Element/div</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-div-element:concept-element-categories>Categories</a>:<dd><a id=the-div-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-div-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dd><a id=the-div-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dd><a id=the-div-element:optgroup-element-inner-content-elements-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</a>.<dd><a id=the-div-element:option-element-inner-content-elements-2 href=dom.html#option-element-inner-content-elements-2><code>option</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-div-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-div-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dd>As a child of a <code id=the-div-element:the-dl-element><a href=#the-dl-element>dl</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-div-element:concept-element-content-model>Content model</a>:<dd>If the element is a child of a <code id=the-div-element:the-dl-element-2><a href=#the-dl-element>dl</a></code> element: One or more <code id=the-div-element:the-dt-element><a href=#the-dt-element>dt</a></code> elements followed by one or more <code id=the-div-element:the-dd-element><a href=#the-dd-element>dd</a></code> elements, optionally intermixed with <a id=the-div-element:script-supporting-elements-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a>.<dd>Otherwise, if the element is a descendant of an <code id=the-div-element:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element: Zero or more
   <a id=the-div-element:option-element-inner-content-elements-2-2 href=dom.html#option-element-inner-content-elements-2><code>option</code> element inner content elements</a>.<dd>Otherwise, if the element is a descendant of an <code id=the-div-element:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element: Zero or more
   <a id=the-div-element:optgroup-element-inner-content-elements-2-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</a>.<dd>Otherwise, if the element is a descendant of a <code id=the-div-element:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element: Zero or more
   <a id=the-div-element:select-element-inner-content-elements-2-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dd>Otherwise: <a id=the-div-element:flow-content-2-3 href=dom.html#flow-content-2>flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-div-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-div-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-div-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-div-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-div>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-div>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-div-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLDivElement</code>.</dl>

  <p>The <code id=the-div-element:the-div-element><a href=#the-div-element>div</a></code> element has no special meaning at all. It <a id=the-div-element:represents href=dom.html#represents>represents</a> its
  children. It can be used with the <code id=the-div-element:classes><a href=dom.html#classes>class</a></code>, <code id=the-div-element:attr-lang><a href=dom.html#attr-lang>lang</a></code>, and <code id=the-div-element:attr-title><a href=dom.html#attr-title>title</a></code> attributes to mark up
  semantics common to a group of consecutive elements. It can also be used in a <code id=the-div-element:the-dl-element-3><a href=#the-dl-element>dl</a></code>
  element, wrapping groups of <code id=the-div-element:the-dt-element-2><a href=#the-dt-element>dt</a></code> and <code id=the-div-element:the-dd-element-2><a href=#the-dd-element>dd</a></code> elements.</p>

  <p class=note>Authors are strongly encouraged to view the <code id=the-div-element:the-div-element-2><a href=#the-div-element>div</a></code> element as an element
  of last resort, for when no other element is suitable. Use of more appropriate elements instead of
  the <code id=the-div-element:the-div-element-3><a href=#the-div-element>div</a></code> element leads to better accessibility for readers and easier maintainability
  for authors.</p>

  <div class=example>

   <p>For example, a blog post would be marked up using <code id=the-div-element:the-article-element><a href=sections.html#the-article-element>article</a></code>, a chapter using
   <code id=the-div-element:the-section-element><a href=sections.html#the-section-element>section</a></code>, a page's navigation aids using <code id=the-div-element:the-nav-element><a href=sections.html#the-nav-element>nav</a></code>, and a group of form
   controls using <code id=the-div-element:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code>.</p>

   <p>On the other hand, <code id=the-div-element:the-div-element-4><a href=#the-div-element>div</a></code> elements can be useful for stylistic purposes or to wrap
   multiple paragraphs within a section that are all to be annotated in a similar way. In the
   following example, we see <code id=the-div-element:the-div-element-5><a href=#the-div-element>div</a></code> elements used as a way to set the language of two
   paragraphs at once, instead of setting the language on the two paragraph elements separately:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-US&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->My use of language and my cats<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My cat&apos;s behavior hasn&apos;t changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>div</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-GB&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Hm, I just noticed that in the last paragraph I used British
  English. But I&apos;m supposed to write in American English. So I
  shouldn&apos;t say &quot;pavement&quot; or &quot;flat&quot; or &quot;colour&quot;...<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->I should say &quot;sidewalk&quot; and &quot;apartment&quot; and &quot;color&quot;!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>


  <nav><a href=sections.html>← 4.3 Sections</a> — <a href=index.html>Table of Contents</a> — <a href=text-level-semantics.html>4.5 Text-level semantics →</a></nav>
